<!--
 * @Author: your name
 * @Date: 2020-04-29 16:31:03
 * @LastEditTime: 2020-06-15 16:50:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \v1.0.0\components\kmlc-com\kmlc-form-pick\kmlc-form-pick.vue
 -->

<template>
  <tui-list-cell :hover="false" :arrow="readonly_?false:true">
      <view class="tui-line-cell">
        <view class="tui-title">
          <text v-show="rules_&&rules_[0]&&rules_[0].required" class="isrequire">*</text> 
          <text>{{label}}</text>
        </view>
        <view v-if="!readonly_" class="tui-box flex">
          <view class="item tippadt8 tui-right">
            <picker @change="bindPickerChange" :value="index" :range="array" range-key="name">
              <view class="product">{{value&&array&&array.length&&array[index]&&array[index].name||'请选择'}}</view>
            </picker>
          </view>
        </view>
        <view class="tui-right" v-else >
          <text>{{array&&array.length&&array[index]&&array[index].name||''}}</text>
        </view>

  
      </view>
    </tui-list-cell>
</template>

<script>
export default {
  name: "kmlc-picker",
  props: {
    label: {
      type: String
    },
    emData: {
      type: Object,
      default: ()=>{return {}}
    },
    readonly:{
      type:Boolean,
      default:false
    },
    options:{
      type:Object,
      default:()=>{return {}}
    },
    rules:{
      type:Array,
      default:()=>{return []}
    },
    model:{
      type:String,
    },
    keyStr:{
      type:String,
    }
  },
  data() {
    return {
      array: [],
      index: 0,
      value:'',
      readonly_:false,
      options_:{},
      rules_:[],
      model_:'',
      key_:''
    };
  },
  watch:{
    'emData.options.defaultValue':function(val){
      console.log('watch data-defaultValue:',val);
      this.value =val||'';
      this.initChecked();
    },
    emData(val){
       console.log('watch emData:',val);
      this.initemData(this.initCheckData);
    }
  },
  created() {
    this.initemData(this.initChecked);
  },
  methods: {
    initemData(callback){
      // 为数据渲染
      if(this.emData &&this.emData.options){
        this.showType_ = this.emData.options.showType;
        this.readonly_ = this.emData.options.readonly;
        this.options_ = this.emData.options;
        this.rules_ = this.emData.rules;
      }else{// 一般组件使用
        this.showType_ = this.showType;
        this.options_ = this.options;
        this.rules_ = this.rules;
        this.model_ = this.model;
        this.key_ = this.keyStr;
      }
      
      this.array = this.options_.options;
      this.value = this.options_.defaultValue;
      callback&&callback();
    },
    initChecked(){
      let temp= this.value&&this.array.filter((item,index)=>item.name==this.value);
      if(temp.length){
        this.array.forEach((item,index)=>{
          if(item.name == this.value){
            this.index =index;
          }
        })
      }
      
    },
    bindPickerChange: function(e) {
      console.log("picker发送选择改变，携带值为：" + e.detail.value);
      this.index = e.detail.value;
      this.value = this.array[this.index].name;
      this.$emit('onChangeVal',{value:this.value,index:this.index});
    }
  },
  modal:{
    prop: 'value',
    event: 'onChangeVal'
  }
};
</script>


<style lang="scss">
.tui-line-cell {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.tui-title {
  min-width: 100upx;
  line-height: 32rpx;
  flex-shrink: 0;
}

.tui-input {
  font-size: 32rpx;
  color: #333;
  padding-left: 20rpx;
  flex: 1;
}
.pad10 {
  padding: 10px;
}
.tui-box {
  flex: 1;
}
.product {
  padding-left: 10px;
  font-size: 30rpx;
  line-height: 32rpx;
  flex: 1;
}
  .tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
    }
	.isrequire{ color:#d41200;}
</style>